<template>
  <div class="more">
    <!--    歌单广场头部-->
    <div class="top">
      <h1>
        <span @click="goBack"><van-icon name="arrow-left" /></span
        ><span>歌单广场</span>
      </h1>
    </div>
    <van-tabs v-model="active" animated>
      <van-tab
        class="Vanttab"
        v-for="item in singleList"
        :key="item.title"
        :title="item.title"
      >
        <h3>Hi云村村民13333..., 快来听听</h3>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="---我是有底线的---"
                @load="onLoad"
        >
        <van-grid :gutter="1" :column-num="3">
          <van-grid-item
            v-for="item in playList"
            :key="item.id" class="VantGrid"
            @click="playListid(item.id)"
          >
            <img :src="item.coverImgUrl" alt="a">
            <p>{{item.name}}</p>
          </van-grid-item>
        </van-grid>
        </van-list>
      </van-tab>
    </van-tabs>
<!--    <div v-for="item in videoList" :key="item.data.durations" >-->
<!--     <iframe height=498 width=510 :src='item.data.scm' frameborder=0></iframe>-->
<!--    </div>-->
  </div>
</template>

<script>
import { getRelated, getVideo, getplayList } from '../../../api/find';
export default {
  name: "More",
  data() {
    return {
      active: 1,
      singleList: [
        { title: "推荐" },
        { title: "官方" },
        { title: "视频歌单" },
        { title: "精品" },
        { title: "欧美" },
        { title: "流行" },
        { title: "民谣" },
        { title: "电子" },
        { title: "轻音乐" },
      ],
      relatedList: [],
      videoList: [],
      page: 1,
      playList: [],
      loading: false,
      finished: false
    };
  },
  created() {
    this.handlerRelated();
    this.handlerVideo();
    this.handlerplayList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async handlerRelated() {
      let params = {
        id:1
      }
      const res = await getRelated(params);
      // console.log(res);
      this.relatedList = res.data.playlists
      // console.log(this.relatedList)
    },
    async handlerVideo() {
      const res = await getVideo()
      // console.log(res)
      this.videoList = res.data.datas
      // console.log(this.videoList)
    },
    async handlerplayList() {
      let params = {
        limit: 30,
        offset:(this.page-1)*30
      }
      this.loading = true
      const res = await getplayList(params)
      // console.log(res)
      if (res.status !== 200) this.$message.error('获取视频失败!')
      this.loading = false
      this.playList = [...this.playList, ...res.data.playlists]
      // console.log(this.playList)
      if (res.data.playlists < 30) {
        this.finished = true
      } else {
        this.page++
      }
    },
    onLoad() {
      setTimeout(() => {
        this.handlerplayList()
      },500)
    },
    playListid(id) {
      alert(id)
    }
  },
};
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .VantGrid img {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: .2rem;
  }
  .VantGrid p {
    width: 1.7rem;
    font-size: .14rem;
    margin: .08rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .van-icon__image {
    width: .6rem;
    height: .6rem;
  }
.Vanttab h3 {
  font-size: 0.34rem;
  font-weight: 700;
  margin: 0.5rem 0 0.2rem 0.1rem;
}
.van-tabs__line {
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 1;
  width: 40px;
  height: 5px;
  background-color: #ee0a24;
  border-radius: 3px;
  opacity: 0.3;
}
.top h1 {
  line-height: 1;
  margin: 0.3rem 0.1rem;
}
.top h1 span {
  font-size: 0.4rem;
}
.top h1 span:first-child {
  position: fixed;
  margin-left: 0.2rem;
  font-size: 0.5rem;
}
.top h1 span:last-child {
  width: 100%;
  display: block;
  text-align: center;
}
</style>
